<template>
	<view class="buttombar" >
		<view class="allOk" v-on:click="addChecked">
			<CheckButton v-bind:isChecked="btnIsChecked"></CheckButton>
			<text>全选</text>
		</view>
		<view class="countprice">
			合计:{{titlePrice}}
		</view>
		<view class="countbth" v-on:click="goCount">
			去结算:{{checkLength}}
		</view>
	</view>
</template>

<script>
	import CheckButton from '../../../components/content/checkButton/checkButton.vue'
	export default {
		components:{
			CheckButton
		},
		data() {
			return {
				
			}
		},
		computed:{
			btnIsChecked(){
				if(this.$store.state.cartList.length===0) return false
				return !this.$store.state.cartList.find(item => !item.isChecked)
			},
			titlePrice(){
				return '￥'+this.$store.state.cartList.filter(item=>{
					return item.isChecked
				}).reduce((preValue,item)=>{
					return preValue+ parseInt(item.price.substring(1))*item.count
				},0)
			},
			checkLength(){
				return this.$store.state.cartList.filter(item=>item.isChecked).length
			}
		},
		methods: {
			addChecked(){
				if(this.btnIsChecked){
					this.$store.state.cartList.forEach(item => item.isChecked=false)
				}else {
					this.$store.state.cartList.forEach(item => item.isChecked=true)
				}
			},
			goCount(){
			  if(this.checkLength){
				this.$toast.show('结算成功！',1000)
			  }
			}
		}
	}
</script>

<style scoped>
.buttombar{
    height: 88rpx;
    position: fixed;
	left: 0;
	right: 0;
	bottom: 100rpx;
    background: #eeeeee;
    display: flex;
}
.allOk{
    display: flex;
    padding-top: 26rpx;
    padding-left: 10rpx;
    width: 20%;
}
.allOk span{
    padding-top: 4rpx;
    margin-left: 10rpx;
}
.countprice{
    width: 60%;
}
.countbth{
    width: 20%;
}
</style>
